import { markRaw } from 'vue';
import { createRouter, createWebHistory } from 'vue-router'; // createWebHashHistory, createWebHistory
import type { Router, RouteRecordRaw, RouteComponent } from 'vue-router';
import { Help as IconHelp } from '@element-plus/icons-vue';

/* Layout */
const Layout = (): RouteComponent => import('@/layout/index.vue');

/* Router Modules */
// import componentsRouter from './modules/components';
// import chartsRouter from './modules/charts';
// import nestedRouter from './modules/nested';
// import tableRouter from './modules/table';
import headwearRouter from './modules/headwear';
import exchangeCodeRouter from './modules/exchangeCode';
import giftRouter from './modules/gift';
import memberDiscountRouter from './modules/memberDiscount';

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 *
 * 注意：hidden、alwaysShow 属性配置移动到了meta中！！！
 */
export const constantRoutes: RouteRecordRaw[] = [
  {
    path: '/redirect',
    component: Layout,
    meta: { hidden: true },
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    meta: { hidden: true }
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect.vue'),
    meta: { hidden: true }
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404.vue'),
    meta: { hidden: true }
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401.vue'),
    meta: { hidden: true }
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        name: 'Dashboard',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  }
];

/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 *
 * 注意：hidden、alwaysShow 属性配置移动到了meta中！！！
 */
export const asyncRoutes: RouteRecordRaw[] = [
  // {
  //   path: '/permission',
  //   component: Layout,
  //   redirect: '/permission/page',
  //   name: 'Permission',
  //   meta: {
  //     alwaysShow: true, // will always show the root menu
  //     title: '用户列表',
  //     icon: 'lock',
  //     roles: ['admin', 'editor'] // you can set roles in root nav
  //   },
  //   children: [
  //     {
  //       path: 'page',
  //       component: () => import('@/views/permission/page.vue'),
  //       name: 'PagePermission',
  //       meta: {
  //         title: '页面权限',
  //         roles: ['admin'] // or you can only set roles in sub nav
  //       }
  //     },
  //     {
  //       path: 'directive',
  //       component: () => import('@/views/permission/directive.vue'),
  //       name: 'DirectivePermission',
  //       meta: {
  //         title: '指令权限'
  //         // if do not set roles, means: this page does not require permission
  //       }
  //     },
  //     {
  //       path: 'role',
  //       component: () => import('@/views/permission/role.vue'),
  //       name: 'RolePermission',
  //       meta: {
  //         title: '角色权限',
  //         roles: ['admin']
  //       }
  //     }
  //   ]
  // },
  {
    path: '/bottle',
    component: Layout,
    meta: {
      alwaysShow: true, // will always show the root menu
      title: '瓶子',
      icon: 'plp',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'realBottle',
        component: () => import('@/views/bottle/index.vue'),
        name: 'realBottle',
        meta: {
          title: '瓶子列表',
          icon: 'plp',
          roles: ['admin'] // or you can only set roles in sub nav
        }
      },
      {
        path: 'publishBottle',
        component: () => import('@/views/bottle/publish.vue'),
        name: 'publishBottle',
        meta: {
          hidden: false,
          title: '发布瓶子',
          icon: 'add',
          roles: ['admin'] // or you can only set roles in sub nav
        }
      },
      {
        path: 'wechat',
        component: () => import('@/views/wechat/index.vue'),
        name: 'wechat',
        meta: { title: '待回复瓶子', icon: 'wechat', affix: false }
      }
    ]
  },
  {
    path: '/publish',
    component: Layout,
    meta: {
      alwaysShow: true, // will always show the root menu
      title: '动态',
      icon: 'plp',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'trendList',
        component: () => import('@/views/trend/index.vue'),
        name: 'trendList',
        meta: { title: '动态列表', icon: 'list', affix: false }
      },
      {
        path: 'trend',
        component: () => import('@/views/trend/publish.vue'),
        name: 'trendPublish',
        meta: { title: '发布动态', icon: 'publick', affix: false }
      },
      {
        path: 'examine',
        component: () => import('@/views/trend/examine.vue'),
        name: 'examine',
        meta: { title: '动态审核', icon: 'example', affix: false }
      }
    ]
  },
  {
    path: '/w_details',
    component: Layout,
    meta: {
      hidden: true
    },
    children: [
      {
        path: 'index',
        component: () => import('@/views/wechat/details.vue'),
        name: 'w_details',
        meta: { title: '待回复瓶子', icon: 'wechat', affix: false }
      }
    ]
  },
  {
    path: '/report',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/report/index.vue'),
        name: 'report',
        meta: { title: '举报', icon: 'bug', affix: false }
      }
    ]
  },
  {
    path: '/api-logs',
    component: Layout,
    meta: {
      alwaysShow: true,
      title: 'API日志',
      icon: 'chart',
      roles: ['admin']
    },
    children: [
      {
        path: '',
        component: () => import('@/views/api-logs/index.vue'),
        name: 'ApiLogs',
        meta: {
          title: 'API统计',
          icon: 'dashboard',
          roles: ['admin'],
          noCache: false
        }
      },
      {
        path: 'fail',
        component: () => import('@/views/api-logs/fail.vue'),
        name: 'ApiFailLogs',
        meta: {
          title: 'API失败日志',
          icon: 'bug',
          roles: ['admin'],
          hidden: true
        }
      },
      {
        path: 'slow',
        component: () => import('@/views/api-logs/slow.vue'),
        name: 'ApiSlowLogs',
        meta: {
          title: 'API慢请求日志',
          icon: 'warning',
          roles: ['admin'],
          hidden: true
        }
      }
    ]
  },
  {
    path: '/feedback',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/feedback/index.vue'),
        name: 'Feedback',
        meta: { title: '意见反馈', icon: 'message', affix: false }
      }
    ]
  },
  headwearRouter,
  exchangeCodeRouter,
  giftRouter,
  memberDiscountRouter,
  // 404 page must be placed at the end !!!
  { path: '/:pathMatch(.*)*', redirect: '/404', meta: { hidden: true } }
];

console.log('BASE_URL=', import.meta.env);

const createTheRouter = (): Router =>
  createRouter({
    // history: createWebHashHistory(import.meta.env.BASE_URL),
    // 注意，如果要配置 HTML5 模式，则需要修改nginx配置，参考资料：
    // https://router.vuejs.org/zh/guide/essentials/history-mode.html
    history: createWebHistory(import.meta.env.BASE_URL),
    scrollBehavior: () => ({ top: 0 }),
    routes: constantRoutes
  });

interface RouterPro extends Router {
  matcher: unknown;
}

const router = createTheRouter() as RouterPro;

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createTheRouter() as RouterPro;
  router.matcher = newRouter.matcher; // reset router
}

export default router;
